<template>
    <div>
        <mt-header fixed class="m_mint_header" title="理财记录">
            <router-link to="/m/manage-wallet" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
        </mt-header>
        <div class="h50"></div>
<!--        <div>{{this.$route.query}}</div>-->
        <div class="buy_manage_detail">
            <el-card :body-style="{ padding: '0px' }" shadow="never">
                <div class="card_title">
                    <span>{{this.$route.query.name}}</span>
                </div>
                <div class="card_body">
                    <el-button disabled type="text">预计收益(WE)</el-button>
                    <el-button disabled type="text">未到期提出违约金(WE)</el-button>
                </div>
                <div class="card_footer">
                    <el-button disabled type="text">{{(this.$route.query.amount*this.$route.query.moneyRate)/100}}</el-button>
                    <el-button disabled type="text">{{(this.$route.query.penaltyRate*this.$route.query.amount)/100}}</el-button>
                </div>
            </el-card>
        </div>
        <div class="manage_details_list">
            <mt-cell title="购买金额" :value="this.$route.query.amount"></mt-cell>
            <mt-cell title="起利时间" :value="this.$route.query.createTime"></mt-cell>
            <mt-cell title="到期时间" :value="this.$route.query.targetEndTime"></mt-cell>
        </div>
        <div class="manage_catch_btn">
            <mt-button size="large" :disabled="disabled" @click.native="clickExtract($route.query)">未到期提出</mt-button>
        </div>
    </div>

</template>

<script>

    import {MessageBox} from 'mint-ui'

    export default {
        name: "ManageDetails",
        data(){
            return {
                disabled: false
            }
        },
        methods:{
            clickExtract(fund) {
                MessageBox.confirm("到期前取出将扣除购买额度" + fund.penaltyRate + "%的违约金且无法获得收益", "温馨提示",)
                    .then(() => {
                        this.requestAxios.requestWeb('post', webUserBalanceApi + '/advance_cash.do', {
                            fundId: fund.id,
                        }, (response) => {
                            // console.log(response);
                            this.$toast(response.message);
                            this.disabled = true;
                        })
                    }).catch(() => {
                        this.$toast('操作取消');
                    }
                );
            }
        }
    }
</script>

<style>
    .manage_details_list .mint-cell {
        background: transparent;
    }
    .manage_details_list .mint-cell .mint-cell-wrapper{
        font-size: .3rem;
    }
    .manage_catch_btn{
        padding:.3rem;
        margin-top: 1rem;
    }
    .manage_catch_btn .mint-button{
        background: linear-gradient(#e47307,#dd5b26);
        color: #fff;
        font-size: .3rem;
        height: .7rem;
    }
</style>
